<template>
  <div>
    <div style="text-align: left">
      <el-input
        v-model="keywords"
        placeholder="输入部门名称搜索部门..."
        style="width: 500px;margin: 0px;padding: 0px;"
        size="mini"
        prefix-icon="el-icon-search"
      />
    </div>
    <div>
      <el-tree
        ref="tree"
        v-loading="treeLoading"
        :props="defaultProps"
        :data="treeData"
        :filter-node-method="filterNode"
        style="width: 500px;margin-top: 10px"
        :render-content="renderContent"
      />
      <div style="text-align: left">
        <el-dialog
          title="添加部门"
          :visible.sync="dialogVisible"
          width="25%"
        >
          <div>
            <span>上级部门</span>
            <el-select v-model="pDep" style="width: 200px" placeholder="请选择" size="mini">
              <el-option
                v-for="item in allDeps"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div style="margin-top: 10px">
            <span>部门名称</span>
            <el-input v-model="depName" size="mini" style="width: 200px;" placeholder="请输入部门名称..." @keyup.enter.native="addDep" />
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取消</el-button>
            <el-button size="small" type="primary" @click="addDep">添加</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keywords: '',
      depName: '',
      treeLoading: false,
      dialogVisible: false,
      allDeps: [],
      pDep: '',
      treeData: [],
      defaultProps: {
        label: 'name',
        isLeaf: 'leaf',
        children: 'children'
      }
    }
  },
  watch: {
    keywords(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted: function() {
    this.treeLoading = true
    this.loadTreeData()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    loadTreeData() {
      this.getRequest('gateway/vhr/system/basic/dep/-1').then(resp => {
        this.treeLoading = false
        if (resp && resp.status === 200) {
          this.treeData = resp.data
        }
      })
    },
    setDataToTree(treeData, pid, respData) {
      for (let i = 0; i < treeData.length; i++) {
        const td = treeData[i]
        if (td.id === pid) {
          treeData[i].children = treeData[i].children.concat(respData)
          return
        } else {
          this.setDataToTree(td.children, pid, respData)
        }
      }
    },
    addDep() {
      this.dialogVisible = false
      this.treeLoading = true
      this.postRequest('gateway/vhr/system/basic/dep', {
        name: this.depName,
        parentId: this.pDep
      }).then(resp => {
        this.treeLoading = false
        if (resp && resp.status === 200) {
          const respData = resp.data
          this.depName = ''
          this.setDataToTree(this.treeData, this.pDep, respData.msg)
        }
      })
    },
    loadAllDeps() {
      this.getRequest('gateway/vhr/system/basic/deps').then(resp => {
        if (resp && resp.status === 200) {
          this.allDeps = resp.data
        }
      })
    },
    showAddDepView(data, event) {
      this.loadAllDeps()
      this.dialogVisible = true
      this.pDep = data.id
      event.stopPropagation()
    },
    deleteDep(data, event) {
      if (data.children.length > 0) {
        this.$message({
          message: '该部门下尚有其他部门，不能被删除!',
          type: 'warning'
        })
      } else {
        this.$confirm('删除[' + data.name + ']部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.treeLoading = true
          this.deleteRequest('gateway/vhr/system/basic/dep/' + data.id).then(resp => {
            this.treeLoading = false
            if (resp && resp.status === 200) {
              this.deleteLocalDep(this.treeData, data)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
      event.stopPropagation()
    },
    deleteLocalDep(treeData, data) {
      for (let i = 0; i < treeData.length; i++) {
        const td = treeData[i]
        if (td.id === data.id) {
          treeData.splice(i, 1)
          return
        } else {
          this.deleteLocalDep(td.children, data)
        }
      }
    },
    renderContent(h, { node, data, store }) {
      return (
        "<span style='flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;'>" +
          '<span>' +
            '<span>{node.label}</span>' +
          '</span>' +
          '<span>' +
            "<el-button style='font-size: 12px;' type='primary' size='mini' style='padding:3px' on-click={ () => this.showAddDepView(data, event) }>添加部门</el-button>" +
            "<el-button style='font-size: 12px;' type='danger' size='mini' style='padding:3px' on-click={ () => this.deleteDep(data, event) }>删除部门</el-button>" +
          '</span>' +
        '</span>')
    }
  }
}
</script>
